<template>
	<view class="box">
		<u-input type="number" class="wraps" placeholder="请输入手机号" maxlength="11" v-model="newphone"></u-input>
		<view class="binding flex_dq" style="margin-top: 30px;">
			<u-input type="number" placeholder="请输入验证码" maxlength="6" v-model.trim="validateCode">
				<template slot="suffix">
					<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
					<u-button @click="varify2()" :text="tips" type="success" size="mini"></u-button>
				</template>
			</u-input>
		</view>
	<!-- 	<view class="iptwrap">
			<text>新手机号:</text>
			<input type="text" :value="name" @input="getname" />
		</view> -->
		<view class="btn" 
			@click="gonext">
			绑定
		</view>
	</view>
</template>

<script>
	import {myuser,sendSmsCode,changeBind} from "../../api/user.js"
	import {bindingMobile } from "../../api/login.js"
	export default {
		data() {
			return {
				validateCode: "",
				tips: '',
				phone:"",
				randstr:"",
				ticket:"",
				newphone:""
			}
		},
		onLoad() {
		this.getuser()
		},
		onReady() {},
		methods: {
			getuser(){
				myuser().then(res=>{
					this.phone=res.data.mobile
				})
			},
			callback(res) {
				console.log(res)
				// 用户操作验证码或者关闭刷新腾讯返回的内容 
				let that = this
				if (res.ret === 0) {
					that.randstr=res.randstr
					that.ticket=res.ticket
					that.getCode()
					console.log("成功")
					//成功，传递数据给后台进行验证
					// 这里后台会给一个借口,把后台需要的参数传过去
					
				} else {
					console.log("验证失败")
					// 提示用户完成验证
				}
			},
			varify2(){
				// #ifdef H5
					if (uni.$u.test.isEmpty(this.newphone)) {
						uni.$u.toast('请输入您的手机号');
						
					}else{
						this.varify()
					}
					
				// #endif
				// #ifdef MP-WEIXIN
					this.getCode()
					
				// #endif
				// #ifdef MP-ALIPAY
				if (uni.$u.test.isEmpty(this.newphone)) {
					uni.$u.toast('请输入您的手机号');
					
				}else{
					this.getCode()
				}
					
					
				// #endif
			},
			varify() {
				let appid = '192455824'; // 腾讯云控制台中对应这个项目的 appid
				//生成一个滑块验证码对象
				let captcha = new TencentCaptcha(appid, this.callback);
				// 滑块显示
				captcha.show();
			
			},
			gonext() {
				if (this.validateCode.length < 6) {
					uni.$u.toast("请输入完整的验证码")
				} else if(!uni.$u.test.mobile(this.newphone)) {
					uni.$u.toast("请输入正确的手机号")
				}else{
					bindingMobile({
						mobile:this.newphone, 
						sms_captcha_code:this.validateCode
					}).then(res=>{
						if(res.code==1){
							setTimeout(()=>{
								uni.navigateBack()
							},1000)
						}
						uni.$u.toast(res.msg)
					})
				}

			},
			getname(e) {
				this.name = e.detail.value
				console.log(e)
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				// console.log(11111);
				let that = this;
				let data = {
					mobile: that.newphone,
					template_code: 'user_register',
					rand_str: that.randstr,
					ticket: that.ticket
				}
				sendSmsCode(data).then(res => {
					console.log(res);
					if (res.code == 1) {
						// that.validateCode=res.data
						uni.$u.toast(res.msg);
						if (that.$refs.uCode.canGetCode) {
							that.$refs.uCode.start();
						}
					}
				})
			},
		},
	}
</script>

<style lang="scss">
	.opacity-50 {
		opacity: 0.5;
	}
	.iptwrap{
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		>text{
			margin-left: 40rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #666666;
		}
		>input{
			width: 600rpx;
			padding-left: 20rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
		}
	}
	.opacity-100 {
		opacity: 1;
	}

	.iptwrap {
		width: 750rpx;
		height: 88rpx;
		background: #FFFFFF;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		margin-top: 40rpx;
		display: flex;
		align-items: center;

		>text {
			margin-left: 40rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #666666;
		}

		>input {
			width: 500rpx;
			padding-left: 20rpx;
			font-weight: 400;
			font-size: 30rpx;
			color: #333333;
		}
	}

	.tip {
		width: 690rpx;
		margin: 0 auto;
		font-weight: 400;
		font-size: 34rpx;
		color: #3D3D3D;
		margin-top: 76rpx;
	}

	.btn {
		width: 690rpx;
		height: 80rpx;
		background: linear-gradient( 90deg, #FA2222 2%, #FFC400 98%);
		border-radius: 190rpx 190rpx 190rpx 190rpx;
		text-align: center;
		line-height: 80rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 56rpx;
	}

	.binding {
		width: 90%;
		margin: 0 auto;
		padding: 18rpx 0;
		border-radius: 60rpx;
		// background: #2B2749;
		/* border-bottom: 1rpx solid #5a5a5a70; */
	}

	/deep/.u-button--success {
		background: none !important;
		border: none !important;
		color: #FFC300 !important;
	}

	/deep/.uni-input-input {
		color: #333;
		font-weight: 300;
		font-size: 30rpx;
	}

	/deep/.u-border {
		border: none;
		border-bottom: 2rpx solid #E5E5E5 !important;
	}

	/deep/.uni-input-wrapper {
		color: #A6A5AF !important;
	}

	/deep/.uni-input-placeholder {
		color: #A6A5AF !important;
	}
	.wraps{
		width: 690rpx;
		margin: 0 auto;
		margin-top: 50rpx;
	}
</style>